<script setup>

</script>

<template>
  <div id="leftecharts3">
    <div class="powerbox1">
      <img src="../../../assets/img/dian.png" alt="">
      <div>
        <span>9054123</span>
        <span>text</span>
      </div>
    </div>
    <div class="powerbox2">
      <img src="../../../assets/img/shui.png" alt="">
      <div>
        <span>5236485</span>
        <span>text</span>
      </div>
    </div>
    <div class="powerbox3">
      <img src="../../../assets/img/nengyuan.png" alt="">
      <div>
        <span>60125478</span>
        <span>text</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#leftecharts3 {
  margin-top: vh(40px);
  display: flex;
  justify-content: space-around;
  align-items: center;

  .powerbox1,
  .powerbox2,
  .powerbox3 {
    display: flex;

    img {
      width: vw(35px);
      height: vh(35px);
      margin-right: vw(10px);
    }

    span {

      &:nth-of-type(1) {
        font-size: rem(14px);
        color: #9fafb6;
      }

      &:nth-of-type(2) {
        display: block;
        font-size: rem(12px);
        color: #6594a0;
      }
    }
  }
}
</style>